<template>
  <div id="download-container" @click.stop="openInfoDialog">
    <el-button icon="el-icon-download" circle size="medium" class="theme-button icon"></el-button>
    <el-drawer title="下载队列" :visible.sync="visible" size="400px" append-to-body :before-close="handleClose">
      <div id="notice-text">文件制作完成一定时间后会自动删除，可主动点击下载亦可等待网站自动下载</div>
      <div id="queue-box" class="theme-border-top">
        <div class="queue-item" v-for="item in queue" :key="item.taskId">
          <div class="info">
            <div class="queue-item-title text-ellipsis">文件：{{ item.fileName }}</div>
            <div class="queue-item-rank">排队：{{ item.range }}</div>
            <div class="queue-item-status">状态：{{ getStatusText(item.status) }}</div>
          </div>
          <div class="btn">
            <el-button :disabled="item.status !== 'FINISHED'" type="text" @click="downloadFile(item.taskId)">下载
            </el-button>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>

import {download, exportQueue} from "@/api/exportApi";
import {downloadFile} from "@/util/downloadUtil";
import {getToken} from "@/util/auth";

export default {
  name: "downloadBox",
  data() {
    return {
      visible: false,
      queue: [],
      downloadTimer: null
    }
  },
  methods: {
    download,
    openInfoDialog() {
      this.visible = true
      this.init()
    },
    handleClose() {
      this.visible = false
    },
    init() {
      exportQueue().then(res => {
        if (res.code === '200') {
          this.queue = res.data
        }
      })
    },
    downloadFile(taskId) {
      download(taskId).then(res => downloadFile(res))
    },
    getStatusText(status) {
      switch (status) {
        case 'WAITING':
          return '等待中'
        case 'BUILDING':
          return '制作中'
        case 'FINISHED':
          return '已完成'
        case 'FAIL':
          return '失败'
        default:
          return '未知'
      }
    },
    setDownloadTimer() {
      console.log('自动下载定时器开启...')
      this.downloadTimer = setInterval(() => {
        const token = getToken();
        if (token === undefined || token === null || token === '') {
          return
        }
        this.init()
        // 过滤出状态为 FINISHED 的任务
        let finishedList = this.queue.filter(item => item.status === 'FINISHED')
        // 下载这些文件
        finishedList.forEach(item => this.downloadFile(item.taskId))
      }, 10000) // 10秒
    }
  },
  created() {
    this.setDownloadTimer()
  },
  destroyed() {
    clearInterval(this.downloadTimer)
    this.downloadTimer = null
  }
}
</script>


<style scoped lang="scss">
#download-container {
  height: 100%;
  cursor: pointer;

  .icon {
    color: white;
  }
}

#notice-text {
  color: var(--theme-color2);
  font-size: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

#queue-box {
  width: 100%;
  height: 95%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  overflow-y: auto;
  overflow-x: hidden;

  .queue-item {
    width: 80%;
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    border-bottom: 1px solid burlywood;

    .info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      .queue-item-title {
        font-size: medium;
        font-weight: bold;
      }
      .queue-item-status {
        font-size: small;
        color: #1da1f2;
      }
      .queue-item-rank {
        font-size: small;
        color: #909399;
      }
    }

    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>